<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列图片案例</title>
    <style>
      div {
          column-count: 5;
      }
      img {
          width: 100%;
          transition: 0.5s;
      }
      img:hover {
          box-shadow: 0 0 20px black ;
          transform: scale(1.02);
      }
    </style>
</head>
<body>
    <div>
        <img src="../images/img1.jpg">
        <img src="../images/img2.jpg">
        <img src="../images/img3.jpg">
        <img src="../images/img4.jpg">
        <img src="../images/img5.jpg">
        <img src="../images/img6.jpg">
        <img src="../images/img7.jpg">
        <img src="../images/img8.jpg">
        <img src="../images/img9.jpg">
        <img src="../images/img10.jpg">
        <img src="../images/img11.jpg">
        <img src="../images/img12.jpg">
        <img src="../images/img13.jpg">
        <img src="../images/img14.jpg">
        <img src="../images/img1.jpg">
        <img src="../images/img2.jpg">
        <img src="../images/img3.jpg">
        <img src="../images/img4.jpg">
        <img src="../images/img5.jpg">
        <img src="../images/img6.jpg">
        <img src="../images/img7.jpg">
        <img src="../images/img8.jpg">
        <img src="../images/img9.jpg">
        <img src="../images/img10.jpg">
        <img src="../images/img11.jpg">
        <img src="../images/img12.jpg">
        <img src="../images/img13.jpg">
        <img src="../images/img14.jpg">
        <img src="../images/img1.jpg">
        <img src="../images/img2.jpg">
        <img src="../images/img3.jpg">
        <img src="../images/img4.jpg">
        <img src="../images/img5.jpg">
        <img src="../images/img6.jpg">
        <img src="../images/img7.jpg">
        <img src="../images/img8.jpg">
        <img src="../images/img9.jpg">
        <img src="../images/img10.jpg">
        <img src="../images/img11.jpg">
        <img src="../images/img12.jpg">
        <img src="../images/img13.jpg">
        <img src="../images/img14.jpg">
        <img src="../images/img1.jpg">
        <img src="../images/img2.jpg">
        <img src="../images/img3.jpg">
        <img src="../images/img4.jpg">
        <img src="../images/img5.jpg">
        <img src="../images/img6.jpg">
        <img src="../images/img7.jpg">
        <img src="../images/img8.jpg">
        <img src="../images/img9.jpg">
        <img src="../images/img10.jpg">
        <img src="../images/img11.jpg">
        <img src="../images/img12.jpg">
        <img src="../images/img13.jpg">
        <img src="../images/img14.jpg">
    </div>
</body>
</html>